<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.min.js"></script>
    <link href="{{ url_for('static',filename='css/index.css') }}" rel="stylesheet">
    <title>老年人心理健康评估</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h2>老年人心理健康评估</h2>
    </header>
    <div class="main">
        <aside class="sidebar">
            <img src="{{ context.head }}" class="head">
            <p>用户名：<span>[[ name ]]
                <icon type="md-create" class="edit_name" @click="edit_name"></icon></span></p>
            <p>邮&nbsp;&nbsp;&nbsp;箱：<span>{{ context.email }}</span></p>
            <p>性&nbsp;&nbsp;&nbsp;别：
                <Poptip
                        confirm
                        popper-class="set_sex"
                        title="请选择："
                        ok-text="男"
                        cancel-text="女"
                        @on-ok="set_sex(true)"
                        @on-cancel="set_sex(false)">
                    <span style="cursor: pointer">[[ showSex ]]</span>
                </Poptip>
            </p>
            <p>年&nbsp;&nbsp;&nbsp;龄：
                <Poptip>
                    <span style="cursor: pointer">[[ age ]]</span>
                    <span slot="content">
                        修改年龄：
                        <input-number :max="120" :min="1" v-model="age" @on-change="change_age"/>
                    </span>
                </Poptip>
            </p>
            <div class="btns">
                <upload action="/up_head" :data="{'uid':{{ context.id }}}" :show-upload-list="false" class="upload"
                        :on-success="upload_head">
                    <i-button icon="ios-cloud-upload-outline" size="large">跟换头像</i-button>
                </upload>
                <i-button size="large" @click="change_pwd">修改密码</i-button>
                <i-button size="large" @click="logout">退出登录</i-button>
            </div>
        </aside>
        <main class="content">
            <i-table :columns="col" :data="tableData"></i-table>
        </main>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        computed: {
            showSex() {
                if (this.sex === null) {
                    return '点击设置'
                } else if (this.sex) {
                    return '男'
                } else {
                    return '女'
                }
            },
        },
        data: {
            uid:{{ context.id }},
            name: '{{ context.name }}',
            sex:{{ context.sex|sex }},
            age:{{ context.age }},
            col: [
                {
                    title: '问卷名称',
                    key: 'title'
                },
                {
                    title: '是否测试',
                    key: 'state',
                    render: (h, params) => {
                        return h('div', [
                            h('tag', {
                                props: {
                                    color: params.row.state ? 'success' : 'default',
                                },
                            }, params.row.state ? '已测试' : '未测试')
                        ]);
                    }
                },
                {
                    title: '测试时间',
                    key: 'time',
                    render: (h, params) => {
                        return h('div', [
                            h('tag', {}, params.row.time)
                        ]);
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    width: 200,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        vm.$Modal.info({
                                            render: (h) => {
                                                return h('div', [
                                                    h('h2', {
                                                        style: {textAlign: 'center', marginBottom: '20px'}
                                                    }, params.row.title),
                                                    h('div', {
                                                        style: {textIndent: '2em'}
                                                    }, params.row.tips)
                                                ])
                                            }
                                        })
                                    },
                                },
                                style: {margin: '5px'}
                            }, '说明'),
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        window.location.href = '/tests?id=' + params.row.id
                                    },
                                },
                                style: {margin: '5px'}
                            }, '测试'),
                            h('Button', {
                                props: {
                                    type: 'warning',
                                    size: 'small',
                                    {#click: 'test',#}
                                    disabled: !params.row.state
                                },
                                on: {
                                    click: () => {
                                        {#vm.result.data = params.row.result#}
                                        vm.$Modal.info({
                                            render: (h) => {
                                                return h('div', [
                                                    h('h2', {
                                                        style: {textAlign: 'center', marginBottom: '20px'}
                                                    }, params.row.title),
                                                    h('i-table', {
                                                        props: {
                                                            columns: [{
                                                                title: "项目",
                                                                key: 'title'
                                                            }, {
                                                                title: "结果",
                                                                key: 'value'
                                                            }],
                                                            data: params.row.result
                                                        },
                                                    }),
                                                ])
                                            },
                                            scrollable: true,
                                            closable: true,
                                        })
                                    },
                                },
                                style: {margin: '5px'}
                            }, '结果')
                        ]);
                    }
                }
            ],
            new_pwd: '',
            new_name: '',
            tableData: {{ context.quizzes|safe }},
        },
        mounted: function () {

        },
        methods: {
            {#修改性别#}
            set_sex(sex) {
                this.sex = sex
                let params = new FormData()
                params.append('action', 'sex')
                params.append('sex', this.sex)
                axios.post('', params).then(res => {
                    if (res.data.state) {
                        this.$Message['success']({
                            background: true,
                            content: '修改成功！'
                        });
                    } else {
                        this.$Message['error']({
                            background: true,
                            content: '修改失败！'
                        });
                    }
                })
            },
            {#修改年龄#}
            change_age(age) {
                let params = new FormData()
                params.append('action', 'age')
                params.append('age', this.age)
                axios.post('', params).then(res => {
                })
            },
            {#修改密码#}
            change_pwd() {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('div', [
                            h('h2', {
                                style: {textAlign: 'center', marginBottom: '20px'}
                            }, '修改密码'),
                            h('Input', {
                                props: {
                                    autofocus: true,
                                    placeholder: '请输入新密码'
                                },
                                on: {
                                    input: (val) => {
                                        this.new_pwd = val
                                    }
                                }
                            })
                        ])
                    },
                    onOk: () => {
                        let params = new FormData
                        params.append('action', 'pwd')
                        params.append('uid', this.uid)
                        params.append('pwd', this.new_pwd)
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.$Message['success']({
                                    background: true,
                                    content: '修改成功！'
                                });
                            } else {
                                this.$Message['error']({
                                    background: true,
                                    content: '修改失败！'
                                });
                            }
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消修改');
                    }
                })
            },
            {#修改名称#}
            edit_name() {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('div', [
                            h('h2', {
                                style: {textAlign: 'center', marginBottom: '20px'}
                            }, '编辑名称'),
                            h('Input', {
                                props: {
                                    value: vm.name,
                                    autofocus: true,
                                },
                                on: {
                                    input: (val) => {
                                        this.new_name = val
                                    }
                                }
                            })
                        ])
                    },
                    onOk: () => {
                        let params = new FormData
                        params.append('action', 'name')
                        params.append('uid', this.uid)
                        params.append('name', this.new_name)
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                vm.name = res.data.name
                                this.$Message['success']({
                                    background: true,
                                    content: '修改成功！'
                                });
                            } else {
                                this.$Message['error']({
                                    background: true,
                                    content: '修改失败！'
                                });
                            }
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消修改');
                    }
                })
            },
            {#修改头像#}
            upload_head() {
                this.$Message['success']({
                    background: true,
                    content: '修改成功！'
                });
                setTimeout(() => {
                    location.reload()
                }, 500)
            },
            {#退出登录#}
            logout() {
                Cookies.remove('uid');
                window.location.href = 'login'
            }
        }
    });
</script>
</html>
